<template>
  <div class="market-warning warning-wrapper">
    <p class="ge-title-one">市值预警</p>
    <van-cell class="comp-title market-title">
      <template slot="title">
        <p class="ge-title-two">第一大股东股权质押</p>
      </template>
    </van-cell>
    <van-tabs v-model="active" :lazy-render="false" @click="clickTab">
      <van-tab title="占其持股">
        <div class="warning-list">
          <van-cell v-if="shareholder_name.length >0">
            <div class="warning-item-title">
              {{shareholder_name}}
            </div>
          </van-cell>
          <van-cell v-else>
            <div class="warning-item-title">
              暂无数据
            </div>
          </van-cell>
        </div>
      </van-tab>
      <van-tab title="占总股本">
        <div class="warning-list">
          <van-cell v-if="shareholder_name.length >0">
            <div class="warning-item-title">
              {{shareholder_name}}
            </div>
          </van-cell>
          <van-cell v-else>
            <div class="warning-item-title">
              暂无数据
            </div>
          </van-cell>
        </div>
      </van-tab>
    </van-tabs>

    <div id="dashboard" class="dashboard dash-chart"></div>
    <!-- <van-cell class="comp-title market-title">
      <template slot="title">
        <p class="ge-title-two">股票预警</p>
      </template>
    </van-cell> -->
    <van-row type="flex" justify="space-between" align="center">
      <van-col span="12">
        <p class="ge-title-two">股票预警</p>
      </van-col>
      <van-col span="5" style="text-align:right;">
      </van-col>
    </van-row>
    <div class="summary">
      <img class="three-change"
           :src="require('@/assets/three-change.png')" /> 三日累计涨跌幅：
      <span v-if="parseFloat(threeChange) < 0"
            class="green">{{threeChange}}</span>
      <span v-if="parseFloat(threeChange) >= 0"
            class="red">{{threeChange}}</span>
    </div>
    <table class="stock-warning-table">
      <thead>
        <tr>
          <th>指标名称</th>
          <th>本日数值</th>
          <th>上日数值</th>
          <th>较上日</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(trItem, trIndex) in stockIndexList" :key="trIndex">
          <td v-for="(tdItem, tdIndex) in trItem" :key="tdIndex" :class="renderTD(tdItem, tdIndex)">{{tdItem}}</td>
        </tr>
      </tbody>
    </table>
    <div class="data-time borBottomLine">{{stockWarningDesc}}</div>
    <!-- <van-cell class="comp-title market-title">
      <template slot="title">
        <p class="ge-title-two">举牌提示</p>
      </template>
    </van-cell> -->
    <van-row type="flex" justify="space-between" align="center">
      <van-col span="12">
        <p class="ge-title-two">举牌提示</p>
      </van-col>
      <van-col span="5" style="text-align:right;">
      </van-col>
    </van-row>
    <van-row class="marTop10" type="flex" justify="center">
      <van-col span="8" type="flex" align="center">
        <van-row><img @click="showTip('insurance_company_data', '保险公司')" class="board-img" :src="require('@/assets/insurance@2x.png')" /></van-row>
        <div class="board-name">保险公司</div>
        <div :class="insurance_company"></div>
      </van-col>
      <van-col span="8" type="flex" align="center">
        <van-row><img @click="showTip('private_equity_data', '私募基金')"  class="board-img" :src="require('@/assets/private@2x.png')" /></van-row>
        <div class="board-name">私募基金</div>
        <div :class="private_equity"></div>
      </van-col>
      <van-col span="8" type="flex" align="center">
        <van-row><img @click="showTip('industrial_capital_data', '产业资产')" class="board-img" :src="require('@/assets/industry@2x.png')" /></van-row>
        <div class="board-name">产业资产</div>
        <div :class="industrial_capital"></div>
      </van-col>
    </van-row>

    <van-dialog
      v-model="hasBoardTip"
      :title="boardTipTitle"
      confirm-button-text='我知道了'
    >
      <table class="stock-warning-table board-tip-wrapper">
      <thead>
        <tr>
          <th>指标</th>
          <th>指标值</th>
          <th>范围</th>
          <th>风险</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in boardTipList" :key="index">
          <td>{{item.index_name}}</td>
          <td>{{item.index_value}}</td>
          <td>{{item.index_range}}</td>
          <td><div :class="[item.index_flag, 'icon-center']"></div></td>
        </tr>
        <!--
        <tr>
          <td>ROE</td>
          <td>3.66%</td>
          <td>5%以上</td>
          <td><div class="up icon-center"></div></td>
        </tr>
        -->
      </tbody>
    </table>
    </van-dialog>

  </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs, Dialog } from 'vant';
import G2 from '@antv/g2';
import { firstStockPledge, getStockWarning, getPlacard } from '@/api/warning';

Vue.use(Tab).use(Tabs);

export default {
  name: 'MarketWarning',
  data () {
    return {
      chart: null,
      active: 0,
      shareholder_name: '',
      shareholding_ratio: 0, // 占持股比例
      total_equity_ratio: 0, // 占总股本比例
      threeChange: '', // 三日累计涨跌幅
      stockWarningDesc: '',
      stockIndexList: [],
      insurance_company: 'up', // 举牌提示-保险公司 趋势
      insurance_company_data: [], // 举牌提示-保险公司 数据
      private_equity: 'mid', // 举牌提示-私募基金 趋势
      private_equity_data: [], // 举牌提示-私募基金 数据
      industrial_capital: 'down', // 举牌提示-产业资产 趋势
      industrial_capital_data: [], // 举牌提示-产业资产 数据
      hasBoardTip: false, // 举牌提示-具体数据是否显示 数据
      boardTipList: [], // 举牌提示-具体数据
      boardTipTitle: '', // 举牌提示-title
    };
  },
  mounted () {
    this.drawBasic(0, 'dashboard', '累计质押股份占其持股比例');
    firstStockPledge().then((res) => {
      // console.log("res:",res)
      this.shareholder_name = res.data.shareholder_name;
      this.shareholding_ratio = res.data.total_equity_ratio * 1;
      this.total_equity_ratio = res.data.shareholding_ratio * 1;
      //this.$nextTick(() => {
      this.draw(this.total_equity_ratio, '累计质押股份占其持股比例');
      //});
    })
    getStockWarning().then((res) => {
      // console.log("时间：",res.data.stock_warning_desc)
      this.threeChange = res.data.three_quote_change;
      this.stockWarningDesc = res.data.stock_warning_desc;
      this.stockIndexList = res.data.data_list;
    })
    getPlacard().then((res) => {
      const {insurance_company, private_equity, industrial_capital} = res.data;
      this.insurance_company = insurance_company.flag;
      this.insurance_company_data = insurance_company.data_list;
      this.private_equity = private_equity.flag;
      this.private_equity_data = private_equity.data_list;
      this.industrial_capital = industrial_capital.flag;
      this.industrial_capital_data = industrial_capital.data_list;
    })

  },
  methods: {
    clickTab (index, title) {
      console.log(index, title)
      if (index == 0) { 
        // 占其持股
        this.draw(this.total_equity_ratio, '累计质押股份占其持股比例');
      } else { 
        // 占总股本
        this.draw(this.shareholding_ratio, '累计质押股份占总股本比例');
      }
    },
    drawBasic (num, id, text) {
      var Shape = G2.Shape;
      // 自定义Shape 部分
      Shape.registerShape('point', 'pointer', {
        drawShape: function drawShape (cfg, group) {
          var center = this.parsePoint({ // 获取极坐标系下画布中心点
            x: 0,
            y: 0
          });
          // 绘制指针
          group.addShape('line', {
            attrs: {
              x1: center.x,
              y1: center.y,
              x2: cfg.x,
              y2: cfg.y,
              stroke: '#E6B261',
              lineWidth: 5,
              lineCap: 'round'
            }
          });
          return group.addShape('circle', {
            attrs: {
              x: center.x,
              y: center.y,
              r: 6.75,
              stroke: '#E6B261',
              lineWidth: 4.5,
              fill: '#fff'
            }
          });
        }
      });

      var data = [{
        value: num
      }];
      var chart = new G2.Chart({
        container: id || 'dashboard',
        forceFit: true,
        width: 210,
        height: 200,
        padding: [-10, 0, 0, 0]
      });
      chart.source(data);

      chart.coord('polar', {
        startAngle: -10 / 8 * Math.PI,
        endAngle: 2 / 8 * Math.PI,
        radius: 0.85
      });
      chart.scale('value', {
        min: 0,
        max: 100,
        tickInterval: 10,
        nice: false
      });

      chart.axis('1', false);
      chart.axis('value', {
        zIndex: 2,
        line: null,
        label: {
          offset: -12,
          textStyle: {
            fontSize: 12,
            textAlign: 'center',
            textBaseline: 'middle'
          },
          htmlTemplate (text, item, index) {
            if (text < 30) {
              return `<span style="font-size:8px;color:#00C581">${text}</span>`;
            } else if (text <= 50) {
              return `<span style="font-size:8px;color:#E6B261">${text}</span>`;
            } else {
              return `<span style="font-size:8px;color:#FF0000">${text}</span>`;
            }

          }
        },
        subTickCount: 4,
        subTickLine: {
          length: -8,
          stroke: '#fff',
          strokeOpacity: 1
        },
        tickLine: {
          length: -17,
          stroke: '#fff',
          strokeOpacity: 1
        },
        grid: null
      });
      chart.legend(false);
      chart.point().position('value*1').shape('pointer').color('#1890FF').active(false);
      this.chart = chart;
      this.draw(num, text);

      // chart.render();
    },
    draw (num, text) {
      console.log("=======",num, text)
      let data = [];
      data.push({
        value: num
      });
      let chart = this.chart;
      chart.guide().clear();
      // 绘制仪表盘背景
      chart.guide().arc({
        zIndex: 0,
        top: false,
        start: [0, 0.945],
        end: [30, 0.945],
        style: { // 绿色
          stroke: '#00C581',
          lineWidth: 18
        }
      });
      chart.guide().arc({
        zIndex: 0,
        top: false,
        start: [30, 0.945],
        end: [50, 0.945],
        style: { // 黄色
          stroke: '#E6B261',
          lineWidth: 18
        }
      });
      // 绘制指标
      chart.guide().arc({
        zIndex: 1,
        start: [50, 0.945],
        end: [100, 0.945],
        style: {// 红色
          stroke: '#FF0000',
          lineWidth: 18
        }
      });
      this.chart.guide().html({
        position: [0, 0],
        position: ['50%', '87%'],
        html: `<div style="width: 300px;text-align: center;">
          <p style="font-size: 11px; color: #727579;margin: 0;">${text}</p>
          <p style="font-size: 22px;color: #222;margin: 0;">${data[0].value}%</p>
        </div>`
      });
      this.chart.changeData(data);
    },
    renderTD(item,index) {
      if(index == 3){
        // console.log("较上日",item)
        let _num = Number(item.replace("%",""));
        if(_num > 0){
          return "red"
        }else if(_num < 0){
          return "green"
        }
      }else{

      }
    },
    showTip(key, title) {
      this.hasBoardTip = true;
      this.boardTipTitle = title;
      console.log(key);
      if(key.length > 0){
        this.boardTipList = this[key];
      }
    },
  }
};
</script>

<style>
.green {
  color: green;
}
.red {
  color:red;
}
.board-tip-wrapper{
  padding: 27px 10px 30px; 
}
.board-tip-wrapper tr th{
  font-weight: normal;
}
.board-tip-wrapper div.icon-center{
  margin: 0 auto 3px;
}
.market-warning {
  position: relative;
  margin-bottom: 20px;
}
.market-warning .summary {
  color: #222222;
  font-size: 14px;
  padding: 5px 0 15px 0;
}
.market-warning .market-title {
  padding: 0;
}
.market-warning .van-tabs--line {
  padding: 0;
}
.market-warning .van-tabs--line .van-tabs__wrap {
  position: absolute;
  top: -45px;
  width: 50%;
  right: 0px;
  left: 50%;
}
.market-warning .van-hairline--top-bottom::after {
  border-width: 0;
}
.market-warning .warning-list .van-cell {
  padding: 15px 6px 0px;
}
.market-warning .dashboard {
  width: 100%;
  height: 200px;
  margin: 15px auto;
}
.market-warning .three-change {
  width: 17px;
  height: 17px;
  vertical-align: bottom;
}
.stock-warning-table {
  width: 100%;
}
.stock-warning-table thead {
  background: #f6f0e5;
  color: #757679;
  font-size: 13px;
}
.stock-warning-table tbody {
  color: #222222;
  font-size: 13px;
}

.market-warning .data-time {
  color: #bcbcbc;
  font-size: 14px;
  padding-top: 9px;
}


.market-warning table tr:first-child th:first-child {
  border-top-left-radius: 10px;
}

.market-warning table tr:first-child th:last-child {
  border-top-right-radius: 10px;
}

.market-warning table tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

.market-warning table tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}
.market-warning table {
  font-size: 13px;
  color: #222;
  text-align: center;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px #e6e6e6;
}
.market-warning tr {
  height: 37px;
  text-align: center;
}

.market-warning table tr th,
.market-warning table tr td {
  /*border-right: 1px solid #E6E6E6;*/
  border-bottom: 1px solid #e6e6e6;
}
.market-warning table tr th:first-child,
.market-warning table tr td:first-child {
  border-left: 1px solid #e6e6e6;
}
.market-warning table tr th:last-child,
.market-warning table tr td:last-child {
  border-right: 1px solid #e6e6e6;
}
.market-warning table tr td:first-child,
.market-warning table tr th:first-child {
  text-align: left;
  padding-left: 9px;
}


.market-warning .board-img {
  width: 71px;
  height: 71px;
}
.market-warning .board-name {
  font-size: 14px;
  color: #757679;
}
.market-warning .up {
  background: url(../assets/up@2x.png) no-repeat center;
  width: 10px;
  height: 15px;
  background-size: 100%;
  margin-top: 8px;
}
.market-warning .down {
  background: url(../assets/down@2x.png) no-repeat center;
  width: 10px;
  height: 15px;
  background-size: 100%;
  margin-top: 8px;
}
.market-warning .mid {
  background: url(../assets/mid@2x.png) no-repeat center;
  width: 10px;
  height: 15px;
  background-size: 100%;
  margin-top: 8px;
}
.dash-chart {
    position: relative;
    -webkit-box-shadow: 0 0 11px 4px rgba(0,0,0,0.05);
    box-shadow: 0 0 11px 4px rgba(0,0,0,0.05);
    border-radius: 10px;
    padding: 10px 0;
    /* margin: 10px 0; */
}
.marTop10 {
  margin-top: 15px;
}
.borBottomLine {
  padding-bottom: 15px;
  border-bottom: 1px solid #f1f1f1;
}
</style>